<!--
 * @Author: 孙大大
 * @Date: 2022-04-09 16:52:45
 * @LastEditTime: 2022-04-14 01:28:09
 * @FilePath: \黑马面面111\src\views\questions\list\search.vue
-->
<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="my-card">
        <el-alert type="info"> 数据一共{{ tableData.counts }}条 </el-alert>

        <!-- 列表 -->
        <el-table
          :data="tableData.items"
          style="width: 100%"
          @row-click="cellClick"
        >
          <el-table-column prop="number" label="试题编号" width="180">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="100">
          </el-table-column>
          <el-table-column prop="catalogID" label="目录" width="119">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="118">
            <template slot-scope="{ row }">
              <span v-if="row.questionType == 1">单选</span>
              <span v-if="row.questionType == 2">多选</span>
              <span v-if="row.questionType == 3">简答</span>
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干" width="118">
            <template slot-scope="{ row }">
              <span v-html="row.question"> </span>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="118">
            <template slot-scope="{ row }">
              <span> {{ row.addDate | formatDate }} </span>
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度" width="118">
            <template slot-scope="{ row }">
              <span v-if="row.difficulty == 1">简单</span>
              <span v-if="row.difficulty == 2">一般</span>
              <span v-if="row.difficulty == 3">困难</span>
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="118">
          </el-table-column>
          <!-- 列表右侧按钮区域 -->
          <el-table-column prop="todo" label="操作" width="118">
            <div>
              <div>
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-view"
                  circle
                  @click="look"
                >
                </el-button>
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-edit"
                  circle
                  @click="GoNew"
                ></el-button>
              </div>
              <div>
                <el-button
                  size="small"
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="delRow"
                ></el-button>
                <el-button
                  size="small"
                  type="danger"
                  icon="el-icon-check"
                  circle
                  @click="addJIN"
                ></el-button>
              </div>
            </div>
          </el-table-column>
        </el-table>

        <!-- 底部分页器 -->
        <div class="block" style="float: right; margin: 20px">
          <!-- <span class="demonstration">完整功能</span> -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="5"
            layout="total, prev, pager, next, jumper"
            :total="tableData.counts"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>

    <!-- 查看试题详情弹窗 -->
    <el-dialog title="题目预览" :visible.sync="dialogVisible" width="635px">
      <!-- 第一行 -->
      <el-row>
        <el-col :span="6">【题型】：{{ questionType }}</el-col>
        <el-col :span="6">【编号】：{{ number }}</el-col>
        <el-col :span="6">【难度】：{{ difficulty }}</el-col>
        <el-col :span="6">【标签】：{{ catalog }}</el-col>
      </el-row>
      <br />
      <br />
      <!-- 第二行 -->
      <el-row>
        <el-col :span="6">【学科】：{{ subject }}</el-col>
        <el-col :span="6">【目录】：{{ catalogID }}</el-col>
        <el-col :span="6">【方向】：{{ direction }}</el-col>
        <el-col :span="6"></el-col>
      </el-row>
      <br />
      <br />
      <hr />
      <!-- 第三行 -->
      <el-row>
        <el-col :span="24" v-html="question"></el-col>
      </el-row>
      <hr />
      <!-- 第四行 -->
      <el-row>
        <el-col :span="24" v-html="answer"></el-col>
      </el-row>
      <hr />
      <!-- 第五行 -->
      <el-row>
        <el-col :span="24"
          >【答案解析】：
          <el-button type="danger" @click="isVideoShow"
            >视频答案预览</el-button
          ></el-col
        >
        <template v-if="videoShow">
          <video :src="videoURL" controls style="width: 300px"></video>
        </template>
      </el-row>
      <hr />
      <!-- 第六行 -->
      <el-row>
        <el-col :span="24" v-html="remarks"></el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >取 消</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { delRow, addJIN } from "@/api/questions";
export default {
  name: "articles",
  props: {
    resultList: {
      require: true,
    },
  },
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      tableData: [],
      currentPage: 1,
      questionList: [],
      dialogVisible: false,
      counts: "",
      questionType: "",
      number: "",
      difficulty: "",
      catalog: "",
      subject: "",
      catalogID: "",
      direction: "",
      question: "",
      answer: "",
      remarks: "",
      videoURL: "",
      id: "",
      videoShow: false,
      row: null,
    };
  },
  created() {
    this.getQuestionList();
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.$store.dispatch("question/changePage", val);
      this.getQuestionList();
    },
    // 加载视图
    async getQuestionList() {
      await this.$store.dispatch("question/getQuestionList");
      this.tableData = this.$store.state.question.questionList;
      console.log(99999, this.tableData);
    },
    async look() {
      this.dialogVisible = true;
    },
    cellClick(row, column, cell, event) {
      // console.log("event", event);
      // console.log("cell", cell);
      // console.log("column", column);
      // console.log("row", row);
      this.row = row;
      // console.log("row", this.row);
      if (row.questionType == 1) {
        this.questionType = "单选题";
      } else if (row.questionType == 2) {
        this.questionType = "多选题";
      } else if (row.questionType == 3) {
        this.questionType = "简答题";
      }
      this.number = row.number;

      if (row.difficulty == 1) {
        this.difficulty = "简单";
      } else if (row.difficulty == 2) {
        this.difficulty = "一般";
      } else if (row.difficulty == 3) {
        this.difficulty = "困难";
      }

      this.catalog = row.catalog;

      this.subject = row.subject;

      this.catalogID = row.catalogID;

      this.direction = row.direction;

      this.question = "【题干】：" + row.question;

      this.answer = "【参考答案】：" + row.answer;

      this.remarks = "【题目备注】：" + row.remarks;

      this.id = row.id;
      this.videoURL = row.videoURL;
      console.log(891263487126391827);
    },
    delRow() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            await delRow(this.id);
            this.$message.success("删除成功");
            this.getQuestionList();
          } catch (error) {
            this.$message.warning("删除失败");
            console.log(error);
          }
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      // console.log(this.id);
      // try {
      //   await delRow(this.id);
      //   this.$message.success("删除成功");
      //   this.getQuestionList();
      // } catch (error) {
      //   this.$message.warning("删除失败");
      //   console.log(error);
      // }
    },
    // async addJIN() {
    //   try {
    //     await addJIN(this.id, 1, {
    //       choiceState: 1,
    //       id: this.id,
    //     });
    //     this.$message.success("加入精选成功");
    //     this.getQuestionList();
    //   } catch (error) {
    //     this.$message.error("请求失败");
    //     console.log(error);
    //   }
    // },
    // 因为第一次点击按钮时，没有id，所以报错，所以改成了第二次点击时，才会触发
    addJIN() {
      this.$confirm("添加到精选题录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await addJIN(this.id, 1, {
            choiceState: 1,
            id: this.id,
          });
          this.getQuestionList();
          this.$message({
            type: "success",
            message: "加入精选成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消加入精选",
          });
        });
    },
    isVideoShow() {
      this.videoShow = !this.videoShow;
    },
    // 跳转传参
    GoNew() {
      this.$router.push({
        path: "/tiku/shiti",
        query: {
          qusetionList: this.row,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// [data-v-f70f99cc]
// [data-v-f70f99cc]
// my-card

.my-card[data-v-f70f99cc] .el-card__header {
  padding: 100px;
  border-bottom: 5px solid #ebeef5 !important;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>
<style>
.app-container {
  padding: 0;
}
.my-card .el-card__header {
  padding-bottom: 0px;
  border-bottom: 0px solid #ebeef5 !important;
}
.my-card .el-card__body {
  padding-top: 0px;
}
.my-card .el-form-item {
  margin: 10px 0;
}
.my-card .el-alert {
  margin: 8px 0 16px;
}
.my-card .el-table__header-wrapper {
  border-bottom: 2px solid #e8e8e8;
  background-color: #fafafa;
}
.my-card th {
  background-color: #fafafa !important;
}
.my-card .my-btn {
  width: 95px;
  height: 32px;
  color: #fff;
  background-color: #67c23a;
  border-color: #67c23a;
}
.my-card .my-shou {
  width: 56px;
  height: 32px;
  padding: 0;
  line-height: 0;
  margin-left: 10px;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
}
.my-card .my-cha {
  width: 56px;
  height: 32px;
  padding: 0;
  line-height: 0;
}
.my-card .el-input__inner {
  height: 32px;
}
.my-card .my-item-two {
  margin-left: 40px;
}
.el-dialog__header {
  background-color: #409eff;
}
.el-dialog__title {
  color: #fff;
}
.el-dialog__close {
  color: #fff !important;
}
</style>
